<template>
  <el-dialog
    class='subject-status-add-record'
    title="变量映射"
    width="800px"
    :show-close='true'
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div>
      <el-form
        :rules="rules"
        :inline="true"
        ref="formRef"
        size="mini"
        :model="formData"
        style="text-align: center"
        label-width="80px">
        <div v-for="(mItem, index) in mapList" :key="index">
          <el-form-item>
            <el-select v-model="formData['field1' + index]" placeholder="请选择" style="width: 95%">
              <el-option v-for="item in fieldList" :key="item.text" :label="item.text" :value="item.text"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData['field2' + index]" placeholder="请选择" style="width: 95%">
              <el-option v-for="item in connectTypeList" :key="item.text" :label="item.text" :value="item.text"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData['field3' + index]" placeholder="请选择" style="width: 50%">
              <el-option v-for="item in tableFieldList" :key="item.variableName" :label="item.variableName" :value="item.variableName"></el-option>
            </el-select>
            <el-button type="danger" round @click="handleDelete(index)" style="margin-left: 12px;">删除</el-button>
            <el-button type="success" round @click="handleAdd" style="margin-left: 12px;">添加</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button :loading='loading' size="small" type="primary" @click="handleSave">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'
import { connectTypeList, fieldList, fieldMap, connectTypeMap, functionTypeMap } from '../data'

export default {
  props: {
    editData: Object,
    dialogVisible: Boolean,
    dialogTitle: String,
    searchParams: Object
  },
  data () {
    return {
      rules: {},
      loading: false,
      defaultFormData: {},
      formData: {},
      connectTypeList,
      fieldList,
      defaultObj: { field1: '', field2: '', field3: '' },
      mapList: [],
      functionTypeMap,
      fieldMap,
      connectTypeMap,
      tableFieldList: []
    }
  },

  watch: {
    dialogVisible(val) {
      if (val) {
        this.formData = this.editData.id ? { ...this.editData } : { ...this.defaultFormData }
        if (this.editData.variableMapping) {
          const itemArray = this.editData.variableMapping.split(';/n')
          itemArray.map((aItem, aIndex) => {
            this.mapList.push({ field1: '', field2: '', field3: '' })
            const valueArray = aItem.split('-')
            valueArray.map((vItem, vIndex) => {
              this.formData[`field${vIndex + 1}` + aIndex] = vItem
            })
          })

        } else {
          this.mapList = [{ field1: '', field2: '', field3: '' }]
        }
        this.getFieldList()
      } else {
        this.formData = { ...this.defaultFormData }
      }
    }
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryVariableConfigListNoLoading']),
    handleClose () {
      this.mapList = []
      this.$emit('handleCancel')
    },

    // 查询表字段
    getFieldList() {
      const params = {
        ...this.searchParams
      }
      this.qryVariableConfigListNoLoading({ params }).then((res) => {
        const { data, code } = res
        if (code === 200) {
          this.tableFieldList = data
        }
      })
    },

    // 确定
    handleSave () {
      const textArray = [] 
      this.mapList.map((mItem, mIndex) => {
        const mText = this.formData['field1' + mIndex] + '-' + this.formData['field2' + mIndex] + '-' + this.formData['field3' + mIndex]
        textArray.push(mText)
      })
      this.mapList = []
      this.$emit('handleSubmitValue', textArray.join(';/n'))
    },

    // 新增条目
    handleAdd () {
      const num = this.mapList.length - 1
      if (this.formData['field1' + num] && this.formData['field2' + num] && this.formData['field3' + num]) {
        this.mapList.push(this.defaultObj)
      } else {
        this.$message.warning('请完善已有数据后，再新增条目!')
        return ''
      }
    },

    // 删除条目
    handleDelete (index) {
      this.mapList.splice(index, 1)
      this.formData['field1' + index] = ''
      this.formData['field2' + index] = ''
      this.formData['field3' + index] = ''
    },

  }
}
</script>
<style lang="scss" scoped>
  @import './add-record.scss';
</style>
